<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>图片更新（左）</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <style>
        .layui-upload-img {
            width: 185px;
            height: 90px;
            margin: 0 10px 10px 0;
        }
    </style>
</head>

<body>
    <fieldset class="layui-elem-field layui-field-title">
        <legend>左侧使用图片</legend>
    </fieldset>
    <div class="layui-form" lay-filter="" style="margin-left: 150px;">
        <div class="layui-upload">
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="img1">
                <p id="demoText"></p>
            </div>
        </div>
    </div>
    <form class="layui-form" id="myform" action="" method="post" enctype="multipart/form-data">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>选择更新图片(最大200KB)</legend>
        </fieldset>
        <div class="layui-form" lay-filter="" style="margin-left: 150px;">
            <div class="layui-upload">
                <button type="button" class="layui-btn layui-btn-normal" id="test1" name="file">选择图片</button>
                <button type="button" class="layui-btn" id="test2">上传图片</button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="img2">
                    <p id="demoText"></p>
                </div>
            </div>
        </div>
    </form>

    <script type="text/javascript" src="../../jquery-3.0.0.min.js"></script>
    <script type="text/javascript" src="../../layui/layui.js"></script>
    <script type="text/javascript" src="../../layui/public.js"></script>
    <script type="text/javascript" src="../../index.js"></script>
    <script type="text/javascript">
        var $;
        layui.use(['form', 'upload'], function () {
            var $ = layui.$,
                form = layui.form
                , upload = layui.upload;

            //身份验证
            if (getoken != false) {

                var formdata = new FormData(document.getElementById("myform"));//获取form表单信息
                var wellid = getQueryVariable("wellid");//获取井id
                var specialty = getQueryVariable("specialty");//获取专业名

                //获取左侧图片
                $.ajax({
                    type: "get",
                    url: api_address + '/dl/getimg?Specialty=' + specialty + '&WellId=' + wellid,
                    async: false,
                    headers: {
                        Authorization: getoken
                    },
                    contentType: 'application/json;',
                    success: function (res) {
                        if (res.code == 200) {
                            $("#img1").attr('src', "data:image/bmp;base64," + res.data[0]);
                        }
                    }
                });

                //图片上传
                var uploadInst = upload.render({
                    elem: '#test1'
                    , url: api_address + '/dl/uploadimg?Imgtag=left&WellId=' + wellid + '&Specialty=' + specialty
                    , headers: {
                        Authorization: getoken
                    }
                    , type: 'Post'
                    , data: formdata
                    , auto: false//不允许自动上传
                    , accept: 'images'
                    , exts: 'jpg|png|gif|bmp|jpeg'
                    , size: 200 //最大限制200kb
                    , bindAction: '#test2' //指向该按钮
                    , choose: function (obj) {
                        //预读本地文件示例，不支持ie8
                        obj.preview(function (index, file, result) {
                            $('#img2').attr('src', result); //图片链接（base64）
                        });
                    }
                    , done: function (res) {
                        if (res.code == 200) {
                            layer.msg('上传成功,请删除该控件重新添加!', { icon: 6 });
                            setTimeout(function () {
                                var index = parent.layer.getFrameIndex(window.name);//关闭弹窗
                                parent.layer.close(index);
                            //     window.parent.location.reload(); //添加成功后刷新父界面
                            }, 2000);
                        } else {
                            layer.msg(res.msg, { icon: 6 });
                        }
                    }
                    , error: function () {
                        //演示失败状态，并实现重传
                        var demoText = $('#demoText');
                        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                        demoText.find('.demo-reload').on('click', function () {
                            uploadInst.upload();
                        });
                    }
                });

            }

        });

        //获取URL参数
        function getQueryVariable(para) {
            var query = window.parent.location.search.substring(1);
            if (query == "") {
                return ("");
            }
            else {
                var vars = query.split("&");
                for (var i = 0; i < vars.length; i++) {
                    var pair = vars[i].split("=");
                    if (pair[0] == para) { return pair[1]; }
                }
            }
        }
    </script>

</body>

</html>